<template>
  <el-dialog :visible.sync="isShow" v-if="isShow" title="api权限" width="50%" :before-close="handleClose" top="100px" :close-on-click-modal="false">
    <div class="flexStartDetween">
      <p v-show="formParams">角色名称：【<span style="color: red;font-size: 18px;">{{formParams.role_name}}</span>】</p>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleClose">取 消</el-button>
        <el-button size="medium" type="primary" @click="handleConfirm()">确 定</el-button>
      </span>
    </div>
    <div class="border-box" style="max-height: 600px;overflow: auto;">
      <el-input class="marginB10" v-model="apiKey" clearable placeholder="输入api字段" />
      <el-tree ref="apiTree" node-key="id" :data="apiDataList" show-checkbox :default-expand-all="true" :default-checked-keys="checkedKeys" :props="defaultProps" :filter-node-method="filterNode" @check="handleCheckChange">
      </el-tree>
    </div>
  </el-dialog>
</template>

<script>
import {
  roleApiAdd
} from '@/api/system.js'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      isShow: false,
      formParams: {},
      userInfo:this.$store.state.user.userInfo,
      apiKey: '',
      apiList: [],
      apiDataList: [],
      chooseApiKey: [],
      checkedKeys: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
    }
  },
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        that.formParams = JSON.parse(JSON.stringify(that.data))
      } else {
        that.formParams = {}
      }
      this.getApiList()
    },
    apiKey (val) {
      this.$refs.apiTree.filter(val);
    }
  },
  mounted () {},
  methods: {
    // 获取API管理
    getApiList () {
      let that = this,apiGroup = [],params=JSON.parse(JSON.stringify(that.formParams));
      that.apiDataList = [{id: -2,label: '全选',children: []}];
      that.chooseApiKey = []
      that.checkedKeys = []
      that.apiList = that.userInfo.api_data
      // api分组
      that.apiList.map(item=>{
        apiGroup.push(item.apiGroup)
      })
      apiGroup=Array.from(new Set(apiGroup)) //去重
      // 不同组的分类【一级类】
      apiGroup.map((item,index)=>{
        that.apiDataList[0].children.push({
          id: item,
          label: item,
          children:[]
        })
      })
      // 同类型的api
      if(that.apiDataList[0].children.length>0){
        that.apiList.map(item=>{
          that.apiDataList[0].children.map(first=>{
            if(first.label==item.apiGroup){
              first.children.push({
                id: item.id,
                label: item.description + `\t(${item.path})`,
              })
            }
          })
        })
      }
      // api权限
      if (params.api_ids) {
        let arrChoose = [], arrChecked = [],api=[];
        api=params.api_ids.split(',')
        api.map(item=>{
          arrChoose.push(parseInt(item))
          arrChecked.push(parseInt(item))
        })
        that.$nextTick(() => {
          that.chooseApiKey = JSON.parse(JSON.stringify(arrChoose))
          that.checkedKeys = JSON.parse(JSON.stringify(arrChecked))
        })
      }
    },
    // 筛选
    filterNode (value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 选择节点
    handleCheckChange (val, data) {
      this.chooseApiKey = data.checkedKeys.filter(item => {
        return typeof (item) == 'number'
      })
    },
    // 确认
    handleConfirm () {
      let that = this,params = JSON.parse(JSON.stringify(that.formParams));
      if(that.chooseApiKey[0]<0){
        that.chooseApiKey.splice(0,1,)
      }
      roleApiAdd({
        id: params.id,
        api_ids: this.chooseApiKey.toString()
      }).then(function (res) {
        that.$message.success(res.msg)
        that.$emit('onHideDetails', true)
      }).catch((error) => {
        that.$message.error(error.msg)
      })
    },
    // 取消
    handleClose () {
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
</style>
